<template>
  <div>
    <div class="tuguang-register">
      <div class="tuguang">
        <img src="../assets/img/logo-shixiseng.ea8da47.png" class="logo" />
        <img src="../assets/img/img_bg.png" class="tuguang_bg" />
        <img src="../assets/img/img_1.png" class="title" />
        <div class="tuguang_box">
          <div class="tuguang_main">
            <img src="../assets/img/img3.png" alt="" />
          </div>
          <div class="register">
            <div class="register_panel">
              <img
                src="../assets/img/icon_login_qr_normal.png"
                class="login-type-tab"
              />
              <div class="login-panel-content">
                <div class="form-title">
                  <router-link to="/register" class="form-title-register"
                    >注册</router-link
                  >
                  <router-link to="/login" class="form-title-login"
                    >登录</router-link
                  >
                </div>
                <div class="form-main">
                  <div class="input-wrap">
                    <div class="input-wrap-icon">
                      <img src="../assets/img/phone.png" alt="" />
                    </div>
                    <div class="area-code">+86</div>
                    <input
                      type="text"
                      placeholder="请输入手机号或者用户名"
                      v-model="uname"
                    />
                    <span ref="uname" class="error">请输入手机号</span>
                  </div>
                  <div class="input-wrap">
                    <div class="input-wrap-icon">
                      <img src="../assets/img/password.png" alt="" />
                    </div>
                    <input
                      type="password"
                      placeholder="请输入密码"
                      v-model="upwd"
                      @keyup.enter="login"
                    />
                    <span ref="upwd" class="error">请输入密码</span>
                  </div>
                  <div class="button" @click="login">登录</div>
                </div>
                <div class="form-footer">
                  <input type="checkbox" v-model="gologin" />
                  <b>登录/注册</b>即代表您同意<a href="#"
                    >「实习僧用户协议及隐私政策」</a
                  >
                </div>
                <div class="line"></div>
                <div class="other">
                  <span>其他登录：</span>
                  <a class="other_weibo" href="#"
                    ><img
                      src="../assets/img/icon_login_weibo_normal.png"
                      alt=""
                    />
                  </a>
                  <a class="other_qq" href="#"
                    ><img src="../assets/img/icon_login_qq_normal.png" alt=""
                  /></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <img class="tuguang_data" src="../assets/img/img_data.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
      gologin: true,
    };
  },
  methods: {
    login() {
      if (!this.uname) {
        this.$refs.uname.style.display = "block";
        return;
      }
      if (!this.upwd) {
        this.$refs.upwd.style.display = "block";
        return;
      }
      const url = `uname=${this.uname}&upwd=${this.upwd}`;
      this.axios.post("v1/login", url).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          // 把用户名存储在全局里
          this.$store.commit("updateLoginState", this.uname);
          alert("登录成功");
          this.$router.push("/");
        } else {
          alert("登录失败，用户名或者密码错误");
        }
      });
    },
  },
};
</script>

<style scoped src="../assets/css/register.css">
</style>
<style scoped src="../assets/css/login.css">
</style>
<style lang="scss" scoped>
</style>